<!--
    author: Aurer
    https://codepen.io/aurer/pen/jEGbA?editors=1100
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加载中图标</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1>基于SVG实现的加载中图标</h1>
    <div class="loader loader--style1" title="1">
        <svg id="loader-1" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='40px' height='40px' viewBox='0 0 40 40' enable-background='new 0 0 40 40'>
            <path opacity="0.2" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
            <path d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z">
                <animateTransform attributeType='xml'
                    attributeName = 'transform'
                    type = 'rotate'
                    from = '0 20 20'
                    to = '360 20 20'
                    dur = '0.5s'
                    repeatCount = 'indefinite'/>
            </path>
        </svg>
    </div>

    <div class="loader loader--style2" title="2">
        <svg id="loader-2" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='40px' height='40px' viewBox='0 0 50 50' enable-background='new 0 0 50 50'>
            <path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
                <animateTransform attributeType='xml'
                    attributeName = 'transform',
                    type = 'rotate'
                    from = '0 25 25'
                    to = '360 25 25'
                    dur = '0.6s'
                    repeatCount = 'indefinite' />
            </path>
        </svg>
    </div>

    <div class="loader loader--style3" title="3">
        <svg id="loader-3" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='40px' height='40px' viewBox='0 0 50 50' enable-background='new 0 0 50 50'>
            <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
                <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 25 25"
                    to="360 25 25"
                    dur="0.6s"
                    repeatCount="indefinite"/>
            </path>
        </svg>
    </div>
    <div class="loader loader--style4" title="4">
        <svg id="loader-4" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' enable-background='new 0 0 50 50'>
            <rect x="0" y="0" width="4" height="7">
                <animateTransform attributeType = 'xml'
                    attributeName = 'transform'
                    type = 'scale'
                    values = '1,1; 1,3; 1,1'
                    begin = '0s'
                    dur = '.6s' repeatCount = 'indefinite' />
            </rect>
            <rect x="10" y="0" width="4" height="7">
                    <animateTransform attributeType = 'xml'
                        attributeName = 'transform'
                        type = 'scale'
                        values = '1,1; 1,3; 1,1'
                        begin = '0.2s'
                        dur = '.6s' repeatCount = 'indefinite' />
                    </rect>
            <rect x="20" y="0" width="4" height="7">
                    <animateTransform attributeType = 'xml'
                        attributeName = 'transform'
                        type = 'scale'
                        values = '1,1; 1,3; 1,1'
                        begin = '0.4s'
                        dur = '.6s' repeatCount = 'indefinite' />
                    </rect>
        </svg>
    </div>
    <div class="loader loader--style5" title="5">
        <svg id="loader-5" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='24px' height='30px' viewBox='0 0 24 30' enable-background='new 0 0 50 50'>
            <rect x='0' y='0' width='4' height='10'>
                <animateTransform attributeType='xml'
                    attributeName='transform'
                    type='translate'
                    values='0,0; 0,20; 0,0'
                    begin='0s'
                    dur='.6s' repeatCount='indefinite'/>
            </rect>
            <rect x='10' y='0' width='4' height='10'>
                    <animateTransform attributeType='xml'
                    attributeName='transform'
                    type='translate'
                    values='0,0; 0,20; 0,0'
                    begin='0.2s'
                    dur='.6s' repeatCount='indefinite'/>
            </rect>
            <rect x='20' y='0' width='4' height='10'>
                    <animateTransform attributeType='xml'
                    attributeName='transform'
                    type='translate'
                    values='0,0; 0,20; 0,0'
                    begin='0.4s'
                    dur='.6s' repeatCount='indefinite'/>
            </rect>
        </svg>
    </div>
    <div class="loader loader--style6" title="6">
        <svg id="loader-6" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='24px' height='30px' viewBox='0 0 24 30' enable-background='new 0 0 50 50'>
            <rect x='0' y='13' width='4' height='5'>
                <animate attributeType = 'xml'
                    attributeName = 'height'
                    values = '5;21;5'
                    begin = '0s'
                    dur = '0.6s' repeatCount = 'indefinite'/>
                <animate attributeType = 'xml'
                    attributeName = 'y'
                    values = '13;5;13'
                    begin = '0s'
                    dur = '0.6s' repeatCount = 'indefinite'/>
            </rect>
            <rect x='10' y='13' width='4' height='5'>
                    <animate attributeType = 'xml'
                    attributeName = 'height'
                    values = '5;21;5'
                    begin = '.2s'
                    dur = '0.6s' repeatCount = 'indefinite'/>
                <animate attributeType = 'xml'
                    attributeName = 'y'
                    values = '13;5;13'
                    begin = '.2s'
                    dur = '0.6s' repeatCount = 'indefinite'/>
            </rect>
            <rect x='20' y='13' width='4' height='5'>
                    <animate attributeType = 'xml'
                    attributeName = 'height'
                    values = '5;21;5'
                    begin = '.4s'
                    dur = '0.6s' repeatCount = 'indefinite'/>
                <animate attributeType = 'xml'
                    attributeName = 'y'
                    values = '13;5;13'
                    begin = '.4s'
                    dur = '0.6s' repeatCount = 'indefinite'/>
            </rect>
        </svg>
    </div>
    <div class="loader loader--style7" title="7"> 
        <svg id="loader-7" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='24px' height='30px' viewBox='0 0 24 30' enable-background='new 0 0 50 50'>
            <rect x="0" y="0" width="4" height="20" fill="#333">
                <animate attributeType='xml'
                    attributeName='opacity'
                    values='1; .2; 1'
                    begin='0s'
                    dur='.6s' repeatCount='indefinite'/>
            </rect>
            <rect x="7" y="0" width="4" height="20" fill="#333">
                <animate attributeType='xml'
                    attributeName='opacity'
                    values='1; .2; 1'
                    begin='.2s'
                    dur='.6s' repeatCount='indefinite'/>
            </rect>
            <rect x="14" y="0" width="4" height="20" fill="#333">
                <animate attributeType='xml'
                    attributeName='opacity'
                    values='1; .2; 1'
                    begin='.4s'
                    dur='.6s' repeatCount='indefinite'/>
            </rect>
        </svg>
    </div>
    <div class="loader loader--style8" title="8">
        <svg id="loader-8" version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" x='0px' y='0px' width='24px' height='30px' viewBox='0 0 24 30' enable-background='new 0 0 50 50'>
            <rect x="0" y="10" width="4" height="10" fill='#333' opacity='.2'>
                <animate attributeType='xml' attributeName='opacity' values='.2; 1; .2' begin='0s' dur='.6s' repeatCount='indefinite'/>
                <animate attributeType='xml' attributeName='height' values='10; 20; 10' begin='0s' dur='.6s' repeatCount='indefinite'/>
                <animate attributeType='xml' attributeName='y' values='10; 5; 10' begin='0s' dur='.6s' repeatCount='indefinite'/>
            </rect>
            <rect x="7" y="10" width="4" height="10" fill='#333' opacity='.2'>
                    <animate attributeType='xml' attributeName='opacity' values='.2; 1; .2' begin='.2s' dur='.6s' repeatCount='indefinite'/>
                    <animate attributeType='xml' attributeName='height' values='10; 20; 10' begin='.2s' dur='.6s' repeatCount='indefinite'/>
                    <animate attributeType='xml' attributeName='y' values='10; 5; 10' begin='.2s' dur='.6s' repeatCount='indefinite'/>
                </rect>
            <rect x="14" y="10" width="4" height="10" fill='#333' opacity='.2'>
                    <animate attributeType='xml' attributeName='opacity' values='.2; 1; .2' begin='.4s' dur='.6s' repeatCount='indefinite'/>
                    <animate attributeType='xml' attributeName='height' values='10; 20; 10' begin='.4s' dur='.6s' repeatCount='indefinite'/>
                    <animate attributeType='xml' attributeName='y' values='10; 5; 10' begin='.4s' dur='.6s' repeatCount='indefinite'/>
                </rect>
        </svg>
    </div>
</body>
</html>